<template>
  <!-- 右键菜单 -->
  <transition name="run">
    <div ref="menuRef" class="rightMenu" v-show="showMenu">
      <ul class="menContainer">
        <li v-for="(menu, index) in props.menus" @click="menu.click" :key="index" class="menuItem">
          <span>
            <el-icon>
              <component :is="menu.icon" />
            </el-icon>
          </span>
          <span>
            {{ menu.name }}
          </span>
        </li>
      </ul>
    </div>
  </transition>
</template>

<script setup lang="ts" name="RightClickMenu">
import { defineExpose, ref } from "vue";
// 接收菜单信息
const props = defineProps({
  menus: {
    type: Object,
  }
})

const showMenu = ref(false);

// 关闭菜单
function close() {
  showMenu.value = false
}

const menuRef = ref<HTMLDivElement | null>()
// 打开菜单和显示位置
function open(event: DragEvent) {
  // 阻止系统默认行为
  event.preventDefault();
  // 先关闭
  showMenu.value = false;
  // 显示位置
  const menu = menuRef.value!
  menu.style.left = event.clientX + 'px';
  menu.style.top = event.clientY + 'px';
  // 显示
  showMenu.value = true;
  // 注册点击侦听事件
  document.addEventListener('click', close);
}

// 暴露方法
defineExpose({ open, close });
</script>

<style scoped>
.rightMenu {
  position: fixed;
  z-index: 99999999;
  cursor: pointer;
  border: 1px solid #eee;
  box-shadow: 0 0.5em 1em 2px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  color: #606266;
  font-size: 14px;
  background: #fff;
  min-width: 120px;
}

.rightMenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 6px;
}

.rightMenu ul li {
  padding: 6px;
  border-bottom: 1px solid #ebeef5;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.rightMenu ul li:last-child {
  border: none;
}

.rightMenu ul li:hover {
  transition: all 0.5s;
  background: #EBEEF5;

}

.rightMenu ul li:hover {
  transition: all 0.5s;
  background: #EBEEF5;
}

.rightMenu ul li:first-child {
  border-radius: 6px 6px 0 0;
}

.rightMenu ul li:last-child {
  border-radius: 0 0 6px 6px;
}

/* ---------------------------------------------特效------------------------------------------ */
/* 元素开始进入的状态 | 元素离开结束的状态 */
.run-enter-from,
.run-leave-to {
  opacity: 0;
}

/* 元素进入结束的状态 ｜ 元素开始离开的状态。     这里不写也可以！！！！！！ */
.run-enter-to,
.run-leave-from {
  opacity: 1;
}

/* 元素进入 ｜ 结束时，过渡的效果 */
.run-enter-active,
.run-leave-active {
  /* 过渡动画的使用 */
  transition: opacity .3s linear 0s;
}

/* --------------------------------------------------------------------------------------- */

.menuItem {
  display: flex;
  justify-content: space-between;
}

.menuItem>span {
  display: inline-flex;
  align-content: center;
  justify-content: center;
  width: 20%;
  box-sizing: border-box;
}

.menuItem>:last-child {
  width: 80%;
  padding-left: 10px;
  font-size: 12px;
  justify-content: flex-start;
  white-space: nowrap;
}
</style>
